<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-背景色-背景图片html</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background: transparent;
        }
    </style>
</head>
<body>
    <!-- 
        背景相关:
            背景色:
                background/background-color: 
                    {
                        1.英文标识 red,blue...
                        2.rgb颜色 值不超过255
                        3.rgba 颜色+透明度[0,1]
                        4.十六进制 #000...
                    }
            透明色:transparent
            背景图片:
                background-image/background:url('图片路径')
                ''可省略
                [默认]是水平和垂直方向平铺的
                    
     -->
    <div class="box"></div>
    <hr>
    <style>
        div{
            width: 1000px;
            height: 500px;
            border: 7px dashed green;
            margin: 0 auto;
        }
        .bg1{
            background: url('images/123.png');
        }
        .bg2{
            background: url('images/777.png');
        }
    </style>
    <!-- 背景图片 -->
    <div class="bg1"></div>
    <hr>
    <div class="bg2"></div>
</body>
</html>